import { InlineFilter } from '@/components/InlineFilter';
import { Alert, Tabs } from '@aws-amplify/ui-react';

The quickest way to get started is by wrapping your application with the Authenticator component.
Once an end-user has created an account & signed in, the underlying component is rendered with access to the `user`.

<InlineFilter filters={['angular']}>
  Register and configure Amplify inside `app.module.ts`

  ```ts{3-4,7,9,13}
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { Amplify } from 'aws-amplify';
  import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

  import { AppComponent } from './app.component';
  import awsconfig from '../aws-exports';

  Amplify.configure(awsconfig);

  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AmplifyAuthenticatorModule],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
  ```

  Open your `angular.json` file, and add `node_modules/@aws-amplify/ui-angular/theme.css` to `styles` array in your `angular.json`. This array is located in `projects.<project-name>.architect.build.options`.

  ```json{2}
  "styles": [
    "node_modules/@aws-amplify/ui-angular/theme.css",
    "src/styles.css"
  ],
  ```

  Wrap your template with `amplify-authenticator` inside `app.component.html`

  ```html
  <amplify-authenticator>
    <ng-template
      amplifySlot="authenticated"
      let-user="user"
      let-signOut="signOut"
    >
      <h1>Welcome {{ user.username }}!</h1>
      <button (click)="signOut()">Sign Out</button>
    </ng-template>
  </amplify-authenticator>
  ```
  **Only if you are using Angular 17,** import the `AmplifyAuthenticatorModule` in `app.component.ts`

```ts{3,8,9}
import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';

import awsExports from './aws-exports';

@Component({
  standalone: true,
  imports: [CommonModule, RouterOutlet, AmplifyAuthenticatorModule],
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class UseAuthenticatorComponent {
  constructor(public authenticator: AuthenticatorService) {
    Amplify.configure(awsExports);
  }
}
```

  <Alert role="none" variation="info" heading="Angular Authenticator v1">
    Looking for a previous version of Authenticator? Checkout the [Authenticator v1 documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-angular).
  </Alert>
</InlineFilter>
<InlineFilter filters={['react']}>
  You can use the `Authenticator` component directly, or wrap your app in `withAuthenticator`
  [Higher-Order Component](https://legacy.reactjs.org/docs/higher-order-components.html):

  <Tabs.Container defaultValue="Authenticator">
  <Tabs.List>
    <Tabs.Item value="Authenticator">Authenticator</Tabs.Item>
    <Tabs.Item value="withAuthenticator">withAuthenticator</Tabs.Item>
  </Tabs.List>
    <Tabs.Panel value="Authenticator">
      ```js{3-4,11-12} file=../../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-username/index.page.tsx

      ```
    </Tabs.Panel>
    <Tabs.Panel value="withAuthenticator">

  `withAuthenticator` defaults the `variation` prop to `modal`.
    <Tabs.Container defaultValue="Javascript">
      <Tabs.List>
        <Tabs.Item value="Javascript">Javascript</Tabs.Item>
        <Tabs.Item value="TypeScript">TypeScript</Tabs.Item>
      </Tabs.List>
      <Tabs.Panel value="Javascript">
      ```jsx
      import { Amplify } from 'aws-amplify';

      import { withAuthenticator } from '@aws-amplify/ui-react';
      import '@aws-amplify/ui-react/styles.css';

      import awsExports from './aws-exports';
      Amplify.configure(awsExports);

      function App({ isPassedToWithAuthenticator, signOut, user }) {
        if (!isPassedToWithAuthenticator) {
          throw new Error(`isPassedToWithAuthenticator was not provided`);
        }

        return (
          <>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </>
        );
      }

      export default withAuthenticator(App);

      export async function getStaticProps() {
        return {
          props: {
            isPassedToWithAuthenticator: true,
          },
        };
      }
      ```
      </Tabs.Panel>
      <Tabs.Panel value="TypeScript">
        ```js{3-4,9,18} file=../../../../../../examples/next/pages/ui/components/authenticator/withAuthenticator/index.page.tsx

        ```
      </Tabs.Panel>
    </Tabs.Container>
    </Tabs.Panel>
  </Tabs.Container>

  <Alert role="none" variation="info" heading="React Authenticator v1">
    Looking for a previous version of Authenticator? Checkout the [Authenticator
    v1
    documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-react).
  </Alert>
</InlineFilter>
<InlineFilter filters={['vue']}>
  For Vue 3, import the `Authenticator` and the `styles.css` into your single file component. You can then use the `<authenticator>` inside your template.

  ```js{2-3,12-17}
  <script setup>
    import { Authenticator } from "@aws-amplify/ui-vue";
    import "@aws-amplify/ui-vue/styles.css";

    import { Amplify } from 'aws-amplify';
    import awsconfig from './aws-exports';

    Amplify.configure(awsconfig);
  </script>

  <template>
    <authenticator>
      <template v-slot="{ user, signOut }">
        <h1>Hello {{ user.username }}!</h1>
        <button @click="signOut">Sign Out</button>
      </template>
    </authenticator>
  </template>
  ```

  <Alert role="none" variation="info" heading="Vue 2">
    If you're looking for the [Vue 2
    documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue)
    please click here.
  </Alert>
</InlineFilter>

<InlineFilter filters={['svelte']}>
  ```html{3-8}
  <script lang="ts">
    import { Amplify } from 'aws-amplify';
    import { Authenticator } from '@aws-amplify/ui-svelte'
    import "@aws-amplify/ui-svelte/styles.css";
    import awsconfig from './aws-exports';

    Amplify.configure(awsconfig);
  </script>

  <Authenticator>
    {#snippet children({ user, signOut })}
      <h1>Hello {user.username}!</h1>
      <button onclick={signOut}>Sign Out</button>
    {/snippet}
  </Authenticator>
  ```
</InlineFilter>